<template>
  <div class="search">
    <div class="search_box">
      <el-input
        v-model="keyword"
        placeholder="请输入用户的boyi名称"
        class="input_search"
        @keyup.enter="searchUser"
      />
      <el-button type="primary" @click="searchUser">搜索</el-button>
    </div>
    <div class="search_result">
      <div v-if="listStore.searchList.length === 0" class="empty">
        <span class="iconfont icon-shimodumeiyou icon"></span>
      </div>
      <div v-else class="result_list">
        <template v-for="item in listStore.searchList" :key="item.id">
          <SearchItem
            :item="item"
            @look-info="lookInfo(item.id)"
            @add-friend="addFriend(item)"
            @delete-friend="deleteFriend(item.id)"
          ></SearchItem>
        </template>
      </div>
    </div>

    <!-- 查看用户信息弹层 -->
    <Dialog
      v-model="lookFriendInfoVisible"
      :visible="lookFriendInfoVisible"
      title="好友信息"
    >
      <FriendInfo
        :item="friendInfo"
        :lookme="friendInfo.bfriends[0].lookme ? true : false"
        :lookhim="friendInfo.bfriends[0].lookhim ? true : false"
        :nickname="nickname"
        @change-nickname="changeNickname"
        @change-look="changeLook"
      ></FriendInfo>
    </Dialog>
    <!-- 添加好友弹层 -->
    <Dialog
      v-model="addFriendVisible"
      :visible="addFriendVisible"
      title="添加好友"
    >
      <AddFriend
        :item="addFriendInfo"
        @add-friend-handle="addFriendHandle"
      ></AddFriend>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import SearchItem from './c-cpns/search-item.vue'
import Dialog from '@renderer/components/dialog.vue'
import AddFriend from './c-cpns/addfriend-item.vue'
import FriendInfo from '@renderer/components/friend-info.vue'

import { alertMessage, message } from '@renderer/utlis/feedback'
import useList from '@renderer/pinai/modules/list'
import useFriend from '@renderer/pinai/modules/friend'

const listStore = useList()
const friendStore = useFriend()

const keyword = ref<string>('') // 搜索关键字
const lookFriendInfoVisible = ref<boolean>(false) // 查看好友信息弹层是否显示
const addFriendVisible = ref<boolean>(false) // 添加好友弹层是否显示
const friendInfo = ref<any>(null) // 当前查看的好友信息
const addFriendInfo = ref<any>(null) // 当前添加的好友信息
const nickname = ref<string>('') // 好友备注名

// 搜索
const searchUser = () => {
  console.log(keyword.value)
  if (!keyword.value) return message('搜索的用户名不能为空', 'warning')
  listStore.getSearchUser(keyword.value)
}

// 查看用户信息
const lookInfo = (id: number) => {
  friendStore.setFriendInfo(id).then((res: any) => {
    friendInfo.value = res
    nickname.value = res.bfriends[0].nickname
    lookFriendInfoVisible.value = true
  })
}

// 修改备注名
const changeNickname = (userinfo) => {
  friendStore
    .editFriendNickname(userinfo)
    .then(() => {
      nickname.value = userinfo.nickname
    })
    .catch(() => {
      nickname.value = friendInfo.value.bfriends[0].nickname
    })
}

// 打开添加好友的弹层
const addFriend = (info: any) => {
  addFriendInfo.value = info
  addFriendVisible.value = true
}

// 修改圈子查看权限
const changeLook = (userinfo) => {
  const lookme = userinfo.me ? 1 : 0
  const lookhim = userinfo.him ? 1 : 0
  const id = userinfo.id
  friendStore.updateCirclePermissionAction(id, { lookme, lookhim }).then(() => {
    message('修改成功', 'success')
  })
}

// 添加好友
const addFriendHandle = (info: any) => {
  console.log(info)
  friendStore
    .addFriendAction(info)
    .then(() => {
      addFriendVisible.value = false
      addFriendInfo.value = {}
      message('添加好友成功,等待对方同意', 'success')
    })
    .finally(() => {
      addFriendVisible.value = false
    })
}

// 删除好友
const deleteFriend = (id: number) => {
  console.log(id)
  alertMessage('确定删除该好友吗？', '删除好友', {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    showCancelButton: true,
    showClose: true,
    showIcon: true,
    type: 'warning',
    callback: async (e) => {
      if (e === 'confirm') {
        await friendStore.deleteFriendAction(id)
        message('删除好友成功', 'success')
        listStore.getFriendList()
        listStore.getSearchUser(keyword.value)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: red; */

  .search_box {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;

    .input_search {
      width: 240px;
      margin-right: 15px;
    }
  }

  .search_result {
    margin-top: 50px;

    .empty {
      .icon {
        font-size: 80px;
      }
    }
  }
}
</style>
